<template>
  <!-- 店铺分析 -->
  <div class="shop_analysis_wrap global-topList pt-16">
    <div class="top_wrap pb-16 borderB-2">
      <span class="mr-8">年月</span>
      <el-date-picker
        class="mr-8 picker_data"
        v-model="yearMonthSelectValue"
        type="month"
        placeholder="选择日期"
        format="yyyy-MM"
        value-format="yyyy-MM"
      >
      </el-date-picker>
      <span class="mr-8">季度</span>
      <el-select
        class="mr-8"
        v-model="quarterPullSelectValue"
        @change="changeQuarterName"
        multiple
        collapse-tags
      >
        <el-option
          v-for="item in quarterList"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <!-- <span class="mr-8">季度</span>
      <el-select
        class="mr-8"
        v-model="quarterPullSelectValue"
        @change="changeQuarterName"
        multiple
        collapse-tags
      >
        <el-option
          v-for="(item, _index) in quarterList"
          :key="_index"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select> -->
      <span class="mr-8">标杆店数</span>
      <el-input
        class="update-input mr-8"
        v-model.number="bg_dian_shu_inputValue"
        type="number"
      ></el-input>
    </div>
    <div class="bottom_wrap pt-16">
      <el-button type="primary" @click="queryBtnClick">查询</el-button>
      <div class="bottom_list">
        <p class="title">标杆店业绩</p>
        <div class="lits_wrap">
          <div class="list">
            <div class="name">店铺数</div>
            <div class="number">{{ bgStoreData.numberOfStores || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">当月业绩(万)</div>
            <div class="number">{{ bgStoreData.monthSellMoney || 0 || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">达成率</div>
            <div class="number">{{ bgStoreData.achievementRate || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">同比</div>
            <div class="number_red">{{ bgStoreData.yearOnYear || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">环比</div>
            <div class="number_red">{{ bgStoreData.chainRatio || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">当月指标(月)</div>
            <div class="number">{{ bgStoreData.monthTarget || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">同期业绩(万)</div>
            <div class="number">{{ bgStoreData.tongMonthSellMoney || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">平均业绩(万)</div>
            <div class="number">{{ bgStoreData.averageSellMoney || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">人效(万)</div>
            <div class="number">{{ bgStoreData.humanEffect || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">评效(万)</div>
            <div class="number">{{ bgStoreData.pingEffect || 0 }}</div>
          </div>
        </div>
      </div>
      <div class="bottom_list">
        <p class="title">直营店业绩</p>
        <div class="lits_wrap">
          <div class="list">
            <div class="name">店铺数</div>
            <div class="number">{{ zyStoreData.numberOfStores || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">当月业绩(万)</div>
            <div class="number">{{ zyStoreData.monthSellMoney || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">达成率</div>
            <div class="number">{{ zyStoreData.achievementRate || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">同比</div>
            <div class="number_red">{{ zyStoreData.yearOnYear || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">环比</div>
            <div class="number_red">{{ zyStoreData.chainRatio || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">当月指标(月)</div>
            <div class="number">{{ zyStoreData.monthTarget || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">同期业绩(万)</div>
            <div class="number">{{ zyStoreData.tongMonthSellMoney || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">平均业绩(万)</div>
            <div class="number">{{ zyStoreData.averageSellMoney || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">人效(万)</div>
            <div class="number">{{ zyStoreData.humanEffect || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">评效(万)</div>
            <div class="number">{{ zyStoreData.pingEffect || 0 }}</div>
          </div>
        </div>
      </div>
      <div class="bottom_list">
        <p class="title">配合店业绩</p>
        <div class="lits_wrap">
          <div class="list">
            <div class="name">店铺数</div>
            <div class="number">{{ phStoreData.numberOfStores || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">当月业绩(万)</div>
            <div class="number">{{ phStoreData.monthSellMoney || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">达成率</div>
            <div class="number">{{ phStoreData.achievementRate || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">同比</div>
            <div class="number_red">{{ phStoreData.yearOnYear || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">环比</div>
            <div class="number_lv">{{ phStoreData.chainRatio || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">当月指标(月)</div>
            <div class="number">{{ phStoreData.monthTarget || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">同期业绩(万)</div>
            <div class="number">{{ phStoreData.tongMonthSellMoney || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">平均业绩(万)</div>
            <div class="number">{{ phStoreData.averageSellMoney || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">人效(万)</div>
            <div class="number">{{ phStoreData.humanEffect || 0 }}</div>
          </div>
          <div class="list">
            <div class="name">评效(万)</div>
            <div class="number">{{ phStoreData.pingEffect || 0 }}</div>
          </div>
        </div>
      </div>
      <div class="table_wrap">
        <!-- :span-method="objectSpanMethod" -->
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
        >
          <el-table-column prop="area" label="区域"> </el-table-column>
          <el-table-column prop="customerName" label="店铺"> </el-table-column>
          <el-table-column prop="monthTarget" label="当月指标">
          </el-table-column>
          <el-table-column prop="monthSellMoney" label="当月业绩">
          </el-table-column>
          <el-table-column prop="tongMonthSellMoney" label="当月同期">
          </el-table-column>
          <el-table-column prop="yearOnYear" label="当月同比">
          </el-table-column>
          <el-table-column prop="quarterTarget" label="季度指标">
          </el-table-column>
          <el-table-column prop="quarterSellMoney" label="季度业绩">
          </el-table-column>
          <el-table-column prop="quarterTongSellMoney" label="季度同期业绩">
          </el-table-column>
          <el-table-column prop="quarterAchievementRate" label="季度达成">
          </el-table-column>
          <el-table-column prop="quarterYearOnYear" label="季度同比">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import today from '../../../components/mixins/today.js'
// 页面接口
import { get_store_analysis_data_api } from '../../../request/store/K_shopFenxi.js'
import { getQuarter } from '@/network/cost'
// import { storeAnalysis } from '@/request/store/K_shopAnalysis'
import { getMonth } from '@/util/util'
export default {
  mixins: [today],
  data() {
    return {
      // 年月
      yearMonthSelectValue: '',
      // 季度
      quarterPullSelectValue: [],
      //标杆店数
      bg_dian_shu_inputValue: 10,
      // 标杆店
      bgStoreData: {},
      zyStoreData: {},
      phStoreData: {},
      value2: '',
      quarterList: [], // 季度
      quarter: null,
      quarterName: '',
      // 表格数据
      tableData: []
    }
  },
  created() {
    // this.requestData.month = getMonth()
    // console.log()
    this.getQuarter()
    // 获取默认年月
    this.yearMonthSelectValue = this.getYearMonth()
  },
  methods: {
    // 查询按钮被点击
    async queryBtnClick() {
      const paramsOBj = {
        month: this.yearMonthSelectValue || '',
        number: Number(this.bg_dian_shu_inputValue),
        // 直接tostring()就行，数组变成字符串
        quarters: this.quarterPullSelectValue.toString()
      }
      console.log(paramsOBj, 'paramsOBj')
      const { data } = await get_store_analysis_data_api(paramsOBj)
      if (data && data.code === 200) {
        this.bgStoreData = data.data.bg
        this.zyStoreData = data.data.zy
        this.phStoreData = data.data.ph
        this.tableData = data.data.list
      } else {
        this.bgStoreData = {}
        this.zyStoreData = {}
        this.phStoreData = {}
        this.tableData = []
      }
      // console.log(res, 'get_store_analysis_data_api')
      // if (res.code !== 200) return
      // this.bgStoreData = res.data.bg
      // this.zyStoreData = res.data.zy
      // this.phStoreData = res.data.ph
      // this.tableData = res.data.list
    },
    // 获取季度
    async getQuarter() {
      const { data } = await getQuarter()
      if (data && data.code === 200) {
        // console.log(data, '季度')
        this.quarterList = data.data
      }
    },
    // 季度改变的下拉框变化的时候触发的函数
    changeQuarterName() {}
    // 选择季度
    // changeQuarterName(index) {
    //   let item = this.quarterList[index]
    //   this.quarter = item.id
    //   this.quarterName = item.name
    // },
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex === 0) {
    //     if (rowIndex == 0) {
    //       return {
    //         rowspan: 4,
    //         colspan: 1
    //       }
    //     } else {
    //       return {
    //         rowspan: 0,
    //         colspan: 0
    //       }
    //     }
    //   }
    // }
  }
}
</script>

<style lang="less" scoped>
.shop_analysis_wrap {
  .top_wrap {
    .picker_data {
      /deep/.el-input__inner {
        height: 32px;
      }
      /deep/.el-input__prefix {
        .el-input__icon {
          line-height: 32px;
        }
      }
      /deep/.el-input__suffix {
        .el-input__suffix-inner {
          .el-input__icon {
            line-height: 32px;
          }
        }
      }
    }
    /deep/.el-select {
      .el-input {
        .el-input__inner {
          height: 32px;
        }
        .el-input__suffix {
          .el-input__suffix-inner {
            .el-select__caret {
              line-height: 32px;
            }
          }
        }
      }
    }
  }
  .bottom_wrap {
    .bottom_list {
      margin-top: 10px;
      .title {
        margin-left: 20px;
        padding-top: 10px;
        color: #656565;
      }
      .lits_wrap {
        display: flex;
        justify-content: space-around;
        text-align: center;
        margin-top: 10px;
        height: 120px;
        border-radius: 10px;
        background-color: #f7f7f7;
        .list {
          width: 120px;
          height: 120px;
          .name {
            margin-top: 30px;
            color: #656565;
          }
          .number {
            margin-top: 10px;
            font-weight: 700;
            font-size: 20px;
            color: #007aff;
          }
          .number_red {
            margin-top: 10px;
            font-weight: 700;
            font-size: 20px;
            color: #fa4c4c;
          }
          .number_lv {
            margin-top: 10px;
            font-weight: 700;
            font-size: 20px;
            color: #46bb02;
          }
        }
      }
    }
    .table_wrap {
      margin-top: 16px;
    }
  }
}
</style>
